<template>
    <view style="background:#eee; min-height:100%;">

        <view style="text-align:center;">
            <text style="line-height:50px; font-weight:700;">通讯录</text>
        </view>

        <view :class="{rowItem:true, touchColor:touchNewActive}"
        @touchstart="touchNewActive=true"
        @touchend="touchNew(0)">
            <image src="http://192.168.43.54:8002/images/icon/news/addLinkman.png" class="leftImg"></image>
            <text class="text">新朋友</text>
        </view>
		<view :class="{rowItem:true, touchColor:touchGroupActive}"
		@touchstart="touchGroupActive=true"
		@touchend="touchNew(1)">
		    <image src="http://192.168.43.54:8002/images/icon/news/group.png" class="leftImg"></image>
		    <text class="text">群通知</text>
		</view>
		<view :class="{rowItem:true, touchColor:touchCreateGroupActive}" style="margin-bottom:20px;"
		@touchstart="touchCreateGroupActive=true"
		@touchend="createGroup">
		    <image src="http://192.168.43.54:8002/images/icon/news/createGroup.png" class="leftImg"></image>
		    <text class="text">创建群</text>
		</view>

		<view>
			<view style="padding: 0 20rpx;">
				<text :class="{listOption: true, bgWhite: listOption==0}" @tap="reLoadList(0)">好友</text>
				<text :class="{listOption: true, bgWhite: listOption==1}" @tap="reLoadList(1)">群聊</text>
			</view>
			<view v-show="listOption == 0">
				<view v-for="(item, index) in friends" :key="item.friendId">
					<view :class="{rowItem:true, touchColor:item.isActive}"
					@touchstart="touchFriend(true, index)"
					@touchend="touchFriend(false, index)">
						<image :src="item.headPhoto" class="leftImg"></image>
						<text class="text" v-text="item.nickname"></text>
					</view>
				</view>
			</view>
			<view v-show="listOption == 1">
				<view v-for="(item, index) in groups" :key="item.groupId">
					<view :class="{rowItem:true, touchColor:item.isActive}"
					@touchstart="touchGroup(true, index)"
					@touchend="touchGroup(false, index)">
						<image :src="item.groupPhoto" class="leftImg"></image>
						<text class="text" v-text="item.groupName"></text>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    components: {
        
    },
    data() {
        return {
            touchNewActive: false,
			touchGroupActive: false,
			touchCreateGroupActive: false,
			// 0.好友列表 1.群列表
			listOption: 0,
			groups: []
        }
    },
    onLoad() {
        this.getFriends()
		
		this.getGroups()
    },
    methods: {
        ...mapActions(['setFriends', 'setCurrentChatFrame']),
        touchNew(option) {
			// option: 0->好友  1->群
			if (option == 0) {
				this.touchNewActive = false
			} else if (option == 1) {
				this.touchGroupActive = false
			}
            uni.navigateTo({
            	url: `/pages/news/newFriend?option=${option}`
            })
        },
        touchFriend(isActive, index) {
            if (isActive == false) {
                this.friends[index].isActive = isActive
                this.setCurrentChatFrame({
                    chatId: this.friends[index].friendId,
                    chatObjectPhoto: this.friends[index].headPhoto,
                    nickname: this.friends[index].nickname,
                    isFriend: 1,
                    blackList: this.friends[index].friendBlackList,
                    userPhoto: this.user.userPhoto,
					chatType: 0
                })
                uni.navigateTo({
                    url: '/pages/news/chatFrame'
                })
            } else {
                this.friends[index].isActive = isActive
            }
        },
		createGroup() {
			this.touchCreateGroupActive = false
			uni.navigateTo({
				url: `/pages/news/createGroup`
			})
		},
		reLoadList(option) {
			this.listOption = option
		},
		getFriends() {
			this.$axios.post('hp/getFriends', this.qs.stringify({
			    userId: this.user.userId
			}))
			.then(res => {
			    let friends = res.data.friends
			    friends = friends.map(item => {
			        item.isActive = false
			        return item
			    })
			    this.setFriends(friends)
			})
			.catch(err => {
			    console.log(err)
			})
		},
		getGroups() {
			this.$axios.post('selectAllGroup', this.qs.stringify({
				userId: this.user.userId
			}))
			.then(res => {
				let groups = res.data.groupList
				this.groups = groups.map(item => {
				    item.isActive = false
				    return item
				})
			})
			.catch(err => {
				console.log(err)
			})
		},
		touchGroup(isActive, index) {
			if (isActive == false) {
			    this.groups[index].isActive = isActive
			    this.$axios.post('selectAllMember', this.qs.stringify({
					groupId: this.groups[index].groupId
				}))
				.then(res => {
					if (res.data.status != -1) {
						this.setCurrentChatFrame({
						    userPhoto: this.user.userPhoto,
							chatType: 1,
							groupPhoto: this.groups[index].groupPhoto,
							groupName: this.groups[index].groupName,
							groupMembers: res.data.users,
							groupId: this.groups[index].groupId,
							ownerId: this.groups[index].ownerId
						})
						uni.navigateTo({
						    url: '/pages/news/chatFrame'
						})
					}
				})
				.catch(err => {
					console.log(err)
				})
			} else {
			    this.groups[index].isActive = isActive
			}
		}
    },
    computed: {
        ...mapState(['friends', 'user'])
    },
    catch: {
        friends: {
            handler: newVal => {},
            immediate: true
        }
    }
}
</script>

<style>

.leftImg {
    height: 45px;
    width: 45px;
    border-radius: 5px;
    margin-right: 20px;
}

.rowItem {
    padding: 10px;
    border: 1px solid #eee;
    background-color: white;
    display: flex;
}

.text {
    line-height: 45px;
}

.touchColor {
    background-color: rgb(199, 199, 199);
}

.listOption {
	display: inline-block;
	padding: 5rpx 20rpx;
	font-size: 40rpx;
	border-radius: 15rpx;
}

.bgWhite {
	background-color: white;
}
</style>